<template>
  <Dropdown ref="dropdown" @on-click="handleClick" :class="hideTitle ? '' : 'collased-menu-dropdown'"
            :transfer="hideTitle" :placement="placement">
    <a class="drop-menu-a" type="text" @mouseover="handleMousemove($event, children)"
       :style="{textAlign: !hideTitle ? 'left' : ''}">
      <common-icon :size="rootIconSize" :color="textColor" :type="parentItem.icon"/>
      <span class="menu-title" v-if="!hideTitle">{{ showTitle(parentItem) }}</span>
      <Icon style="float: right;" v-if="!hideTitle" type="ios-arrow-forward" :size="16"/>
    </a>
    <DropdownMenu ref="dropdown" slot="list">
      <template v-for="child in children">
        <collapsed-menu v-if="showChildren(child)" :icon-size="iconSize" :parent-item="child"
                        :key="`drop-${child.name}`"></collapsed-menu>
        <DropdownItem v-else :key="`drop-${child.name}`" :name="child.name">
          <common-icon :size="iconSize" :type="child.icon"/>
          <span class="menu-title">{{ showTitle(child) }}</span></DropdownItem>
      </template>
    </DropdownMenu>
  </Dropdown>
</template>
<script>
  import mixin from './mixin'
  import itemMixin from './item-mixin'
  import { findNodeUpperByClasses } from '@/libs/util'

  export default {
    name: 'CollapsedMenu',
    mixins: [mixin, itemMixin],
    props: {
      hideTitle: {
        type: Boolean,
        default: false
      },
      rootIconSize: {
        type: Number,
        default: 16
      }
    },
    data () {
      return {
        placement: 'right-end'
      }
    },
    methods: {
      handleClick (name) {
        this.$emit('on-click', name)
      },
      handleMousemove (event, children) {
        const { pageY } = event
        const height = children.length * 38
        const isOverflow = pageY + height < window.innerHeight
        this.placement = isOverflow ? 'right-start' : 'right-end'
      }
    },
    mounted () {
      let dropdown = findNodeUpperByClasses(this.$refs.dropdown.$el, ['ivu-select-dropdown', 'ivu-dropdown-transfer'])
      if (dropdown) dropdown.style.overflow = 'visible'
    }
  }
</script>
